export class Placard{
	constructor(options){
		this.options = options;
		this.canvasId = options.id;
		this.canvasWidth = options.width;
		this.canvasHeight = options.height;
		
		this.canvasElement = null;
		
		this.ctx = null;
		this.imageTempPath = {}
		this.posterTempFilePath = ""
	}
	// 与加载图片
	// https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html#Canvas-2D-%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
	async init(){
		let that = this
		const query = wx.createSelectorQuery().in(this)
		console.log(query)
		query.select('#myCanvas')
		  .fields({ node: true, size: true })
		  .exec((res) => {
			console.log("============res")
			console.log(res)
			const canvas = res[0].node
			
			// that.canvasElement = canvas
			// that.ctx = canvas.getContext('2d')
	
			const dpr = wx.getSystemInfoSync().pixelRatio
			canvas.width = res[0].width * dpr
			canvas.height = res[0].height * dpr
			console.log(canvas.width)
			console.log(canvas.height)
			
			ctx.fillStyle='#FF0000';
			ctx.scale(dpr, dpr)
			ctx.fillRect(0, 0, 100, 100)
		  })

	    const img1Info = this.preLoadImg("https://test.magicTang.com/assets/background-31f042hh.jpg", 'img1')
	    const img2Info = this.preLoadImg("https://test.magicTang.com/assets/1685722510864.jpg", 'img2')

	    Promise.all([img1Info,img2Info]).then(res=>{
	        // 开始绘制canvas
			console.log(this.imageTempPath)
			this.test(img1Info.path)
	    })
	}
	async preLoadImg(url, taskId) {
	
	    if(this.imageTempPath[taskId]) return Promise.resolve();
	    
	    if (!url) return Promise.resolve();
	
	    url = /^https/.test(url) ? url : `https:${url}`;
		
		return new Promise((resolve,reject)=>{
			wx.getImageInfo({src: url}).then(res=>{
				this.imageTempPath[taskId] = res.path;
				resolve(res)
			}).catch(e=>{
				reject(e)
			})

		})
	}
	test(imagePath){
		console.log(imagePath)
		this.ctx.beginPath();
		this.ctx.drawImage(imagePath, 0, 0, this.canvasWidth, this.canvasHeight);
		this.ctx.setTextAlign('center');
		this.ctx.setFillStyle('#FFFFFF');
		this.ctx.setFontSize(24);
		this.ctx.fillText('海报文本', 150, uni.upx2px(90));
		this.ctx.draw();
	}
	//计算不同长度的文本绘制高度
	getWordDiffDistance(
	    ctx,        // canvas 上下文
	    text,       // 要计算的文本
	    baseline,   // 默认显示行数
	    lineHeight, // 行高
	    fontSize,   // 字号
	    textIndent, // 首行缩进字符
	    maxWidth,   // 每一行绘制的最大宽度
	    maxLine     // 最大允许显示行数
	) {
	    // 设置上下文的字号
	    ctx.setFontSize(fontSize);
	
	    // 首行缩进的宽度
	    const textIndentWidth = fontSize * textIndent;
	     //实际总共能分多少行
	    let allRow = Math.ceil((ctx.measureText(text).width + textIndentWidth) / maxWidth);
	
	    allRow = Math.min(allRow, maxLine);
	
	    return (allRow - baseline) * lineHeight;
	}
	
	/**
	 * 文本超出指定行数后显示 ...
	 *
	 *  设置好 canvas 上下文的文字样式
		通过 measureText 计算出当前文本需要绘制多少行
		如果是首行且设置了首行缩进，绘制的 x 要加上缩进的宽度
		然后计算出每一行要绘制的文字并进行绘制，并记录最后的截取位置
		如果最后一行的实际绘制宽度大于设置的最大宽度，添加... 否则正常绘制
	 */
	dealWords(options) {
	    const {
	        ctx,
	        fontSize,
	        word,
	        maxWidth,
	        x,
	        y,
	        maxLine,
	        lineHeight,
	        style,
	        textIndent = 0,
	    } = options;
	    ctx.font = style || "normal 12px PingFangSC-Regular";
	
	     //设置字体大小
	    ctx.setFontSize(fontSize);
	
	     // 首行缩进的宽度
	    const textIndentWidth = fontSize * textIndent;
	
	     //实际总共能分多少行
	    let allRow = Math.ceil((ctx.measureText(word).width + textIndentWidth) / maxWidth);
	
	     //实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
	    let count = allRow >= maxLine ? maxLine : allRow;
	
	     //当前字符串的截断点
	    let endPos = 0;
	    for (let j = 0; j < count; j++) {
	        let startWidth = 0;
	        if (j == 0 && textIndent) startWidth = textIndentWidth;
	        let rowRealMaxWidth = maxWidth - startWidth;
	
	         //当前剩余的字符串
	        let nowStr = word.slice(endPos);
	
	         //每一行当前宽度
	        let rowWid = 0;
	        if (ctx.measureText(nowStr).width > rowRealMaxWidth) {
	            //如果当前的字符串宽度大于最大宽度，然后开始截取
	            for (let m = 0; m < nowStr.length; m++) {
	                 //当前字符串总宽度
	                rowWid += ctx.measureText(nowStr[m]).width;
	                if (rowWid > rowRealMaxWidth) {
	                    if (j === maxLine - 1) {
	                    //如果是最后一行
	                    ctx.fillText(
	                        nowStr.slice(0, m - 1) + "...",
	                        x + startWidth,
	                        y + (j + 1) * lineHeight
	                    ); //(j+1)*18这是每一行的高度
	                    } else {
	                    ctx.fillText(
	                        nowStr.slice(0, m),
	                        x + startWidth,
	                        y + (j + 1) * lineHeight
	                    );
	                    }
	                    endPos += m; //下次截断点
	                    break;
	                }
	            }
	        } else {
	            //如果当前的字符串宽度小于最大宽度就直接输出
	            ctx.fillText(nowStr.slice(0), x, y + (j + 1) * lineHeight);
	        }
	    }
	}
	
	/**
	 * 图文对齐  - 绘制圆角矩形路径
	 *
	 *  微信小程序中通过 setTextBaseline 设置文本竖直对齐方式。可选值有 top,bottom,middle,normal;
		图片的坐标基点为左上角坐标，所以在绘制的时候要注意 y 的起始坐标。
		如果有修改 文本的对齐方式，在结束的时候最好将文本竖直对齐方式设置为 normal,避免影响后续的绘制。
	 */
	// 按照canvas的弧度从 0 - 2PI 开始顺时针绘制
	 drawRoundRectPathWithArc(ctx, x, y, width, height, radius) {
	    ctx.beginPath();
	    // 从右下角顺时针绘制，弧度从0到1/2PI
	    ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
	
	    // 矩形下边线
	    ctx.lineTo(x + radius, y + height);
	
	    // 左下角圆弧，弧度从1/2PI到PI
	    ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
	
	    // 矩形左边线
	    ctx.lineTo(x, y + radius);
	
	    // 左上角圆弧，弧度从PI到3/2PI
	    ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
	
	    // 上边线
	    ctx.lineTo(x + width - radius, y);
	
	    //右上角圆弧
	    ctx.arc(x + width - radius,y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
	
	    //右边线
	    ctx.lineTo(x + width, y + height - radius);
	    ctx.closePath();
	}
	
	 drawRoundRectPathWithArcTo(ctx, x, y, width, height, radius) {
	    ctx.beginPath();
	
	    // 上边线
	    ctx.lineTo(x + width - radius, y);
	
	    // 右上弧线
	    ctx.arcTo(x + width, y, x + width, y + radius, radius)
	
	    //右边线
	    ctx.lineTo(x + width, y + height - radius);
	
	
	    // 从右下角顺时针绘制，弧度从0到1/2PI
	    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius)
	
	    // 矩形下边线
	    ctx.lineTo(x + radius, y + height);
	
	    // 左下角圆弧，弧度从1/2PI到PI
	    ctx.arcTo(x, y + height, x, y +height -radius, radius)
	
	    // 矩形左边线
	    ctx.lineTo(x, y + radius);
	
	    // 左上角圆弧，弧度从PI到3/2PI
	    ctx.arcTo(x,y, x+ radius, y, radius)
	
	    
	    ctx.closePath();
	}
	
	 fillRoundRectPath(ctx, x, y, width, height, radius, color){
	    ctx.save();
	    this.drawRoundRectPathWithArc(ctx, x, y, width, height, radius);
	    ctx.setFillStyle(color);
	    ctx.fill();
	    ctx.restore();
	}
	// 图片填充
	 drawRoundRectImg(ctx, x, y, width, height, radius, img) {
	    if(!img) return
	    ctx.save();
	    this.drawRoundRectPathWithArc(ctx, x, y, width, height, radius);
	    // 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
	    ctx.clip();
	    ctx.drawImage(img, x, y, width, height);
	    ctx.restore();
	}
	// 	// 图片填充
	 strokeRoundRectPath(ctx, x, y, width, height, radius) {
	    this.drawRoundRectPathWithArc(ctx, x, y, width, height, radius);
	    ctx.strokeStyle = "#DDDDDD";
	    ctx.lineWidth = 0.5;
	    ctx.setLineDash([6, 5]);
	    ctx.stroke();
	}
	// 生成临时图片
	createTempImage(){
		ctx.draw(false, async () => {
		    // canvas画布转成图片并返回图片地址
		    const { tempFilePath } = await wx.canvasToTempFilePath(
		        {
		            x: 0,       // 指定的画布区域的左上角横坐标	
		            y: 0,       // 指定的画布区域的左上角纵坐标
		            width: posterImg_width,     // 指定的画布区域的宽度	
		            height: posterImg_height,   // 指定的画布区域的高度
		            destWidth: posterImg_width * pixelRatio, // 输出的图片的宽度 导出大小为 canvas 的 pixelRatio 倍
		            destHeight: posterImg_height * pixelRatio, // 输出的图片的高度 
		            canvasId: "posterCanvas",
		        },
		    );
		    this.posterTempFilePath = tempFilePath;
		});
	}
	savePoster(tempFilePath) {
	    wx.saveImageToPhotosAlbum({
	        filePath: tempFilePath,
	    }).then(()=> {
	        wx.showToast({
	            title: "保存成功", 
	            icon: "success",
	            duration: 2000,
	            mask: true, 
	        });
	    },
	    (err) => {
	        wx.showToast({
	            title: "保存失败",
	            icon: "none",
	            duration: 2000,
	            mask: true,
	        });
	    },);
	}
}
